<template>
  <div>
    <!-- <a-spin :spinning="spinning"> -->
    <!-- 顶部 -->
    <div class="top flexAround">
      <div class="top_content">
        <div class="top_content_title">分包单位</div>
        <div class="top_content_content">{{this.topInfo.labourTotal}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">施工班组</div>
        <div class="top_content_content">{{this.topInfo.teamTotal}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">在场人数</div>
        <div class="top_content_content">{{this.topInfo.inPersonTotal}}</div>
      </div>
    </div>

    <div class="center flexBetween">
      <div class="left">
        <div class="flexBetween" style="margin-bottom:15px">
          <div style="font-size:18px">分包单位列表</div>
          <div style="font-size:16px;cursor: pointer;color:#1890ff" @click="newAdd">新建</div>
        </div>
        <div class="list">
          <ul>
            <li v-for="(item,index) in list" :key="index">
              <div class="li_content" :class="{activeLi:item.check}" @click="clickli(item)">
                <div class="list_title" :class="{activeTitle:item.check}">{{item.title}}</div>
                <div class="flexBetween">
                  <div class="list_content" :class="{activeContent:item.check}">施工班组：{{item.group}}</div>
                  <div class="list_content" :class="{activeContent:item.check}">在场人员：{{item.person}}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="right" v-if="!isdelete">
        <!-- <a-spin :spinning="spinningRight"> -->
        <div class="flexBetweenCenter" style="margin-bottom:20px">
          <div class="unitTitle">{{this.formUnit.name}}</div>
          <div>
            <a-dropdown-button>
              <a-menu slot="overlay" @click="handleMenu">
                <a-menu-item key="1">
                  <a-icon type="edit" />编辑
                </a-menu-item>
                <a-menu-item key="2">
                  <a-icon type="delete" />删除
                </a-menu-item>
              </a-menu>
            </a-dropdown-button>
          </div>
        </div>

        <!-- 表单 -->
        <div class="aform divPadding">
          <a-form-model ref="ruleForm" layout="inline" :model="formUnit" labelAlign="left">
            <a-form-model-item
              ref="creditCode"
              label="统一社会信用代码"
              prop="creditCode"
              style="width:45%"
            >{{formUnit.creditCode}}</a-form-model-item>
            <a-form-model-item
              ref="type"
              label="承包类型"
              prop="type"
              style="width:50%"
            >{{formUnit.type}}</a-form-model-item>
            <a-form-model-item
              ref="manager"
              label="负责人"
              prop="manager"
              style="width:45%"
            >{{formUnit.manager}}</a-form-model-item>
            <a-form-model-item
              ref="date"
              label="合同时间"
              style="width:50%"
            >{{formUnit.contractStartDate}} ~ {{formUnit.contractEndDate}}</a-form-model-item>
            <a-form-model-item ref="contract" label="分包合同" style="width:45%">
              <div
                style="color:#1890ff;cursor:pointer;width:200px"
                v-for="(item,index) in formUnit.contractFileInfoList"
                :key="index"
                @click="pdfModal(item)"
              >{{item.fileName}}</div>
            </a-form-model-item>
            <a-form-model-item ref="payment" label="委托工资支付协议" style="width:50%">
              <div
                style="color:#1890ff;cursor:pointer;width:200px"
                v-for="(item,index) in formUnit.paymentPackageIdFileInfoList"
                :key="index"
                @click="pdfModal(item)"
              >{{item.fileName}}</div>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!-- 按钮 -->
        <div class="flexBetweenCenter" style="margin-bottom:15px">
          <div style="font-size:18px;margin-left:20px">施工班组信息</div>
          <div>
            <a-button type="primary" @click="relationGroup" v-if="this.list.length!=0">关联班组</a-button>
          </div>
        </div>
        <div class="atable">
          <a-table :columns="columns" :data-source="data" :pagination="false" :scroll="{ y: 400}">
            <span slot="action" slot-scope="text, record">
              <a style="color:#1890FF" @click="onShow(text, record)">查看人员</a>
              <a style="color:#1890FF;margin-left:10px" @click="onSet(text, record)">设置班组负责人</a>
              <a style="color:#1890FF;margin-left:10px" @click="onEdit(text, record)">编辑</a>
              <a-popconfirm
                title="确认取消关联"
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirm(text,record)"
                @cancel="cancel"
              >
                <a style="color:#1890FF;margin-left:10px">取消关联</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
        <!-- 分页 -->
        <!-- <div class="pagination flexBetween">
              <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
              <div>
                <a-pagination
                  :current="current"
                  :page-size-options="pageSizeOptions"
                  :total="this.configFun.pageNum(total)"
                  show-size-changer
                  :page-size="pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="pageChange"
                  show-quick-jumper
                >
                  <template slot="buildOptionText" slot-scope="props">
                    <span>{{ props.value }}条/页</span>
                  </template>
                </a-pagination>
              </div>
        </div>-->
        <!-- </a-spin> -->
      </div>
    </div>
    <!-- 对话框 -->
    <div>
      <a-modal
        v-model="visible"
        :title="modalTitle"
        @ok="clickConfirm"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        class="aModal"
        :centered="true"
      >
        <div v-if="modalTitle=='关联班组'">
          <div style="margin-bottom:10px">
            请选择以下班组进行关联：
            <span style="color:red">(施工班组信息请在平安守护系统中维护)</span>
          </div>
          <a-radio-group v-model="value" @change="radioChange">
            <a-radio
              :style="radioStyle"
              :value="item.value"
              v-for="(item,index) in teamGroup"
              :key="index"
            >{{item.name}}</a-radio>
          </a-radio-group>
        </div>

        <div v-if="modalTitle=='新建分包单位'||modalTitle=='编辑分包单位'">
          <a-form-model ref="ruleForm" :model="modalForm1" v-if="visible" :rules="rules">
            <!-- :label-col="labelCol"
            :wrapper-col="wrapperCol"-->
            <a-form-model-item ref="type" label="承包类型" prop="type">
              <a-select
                v-if="modalTitle=='新建分包单位'"
                label-in-value
                @change="selectChange"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="(item,index) in modalForm1.type "
                  :key="index"
                  :value="item.key"
                >{{item.lable}}</a-select-option>
              </a-select>
              <a-select
                v-if="modalTitle!='新建分包单位'"
                label-in-value
                :default-value="this.modalForm1.defaultValue"
                placeholder="请选择"
                @change="selectChange"
              >
                <a-select-option
                  v-for="(item,index) in modalForm1.type "
                  :key="index"
                  :value="item.key"
                >{{item.lable}}</a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item ref="name" label="单位名称（全称）" prop="name">
              <a-input placeholder="请输入单位名称" v-model="modalForm1.name"></a-input>
            </a-form-model-item>

            <a-form-model-item ref="creditCode" label="统一社会信用代码" prop="creditCode">
              <a-input placeholder="请输入统一社会信用代码" v-model="modalForm1.creditCode"></a-input>
            </a-form-model-item>

            <a-form-model-item ref="manager" label="单位负责人" prop="manager">
              <a-input placeholder="请输入单位负责人" v-model="modalForm1.manager"></a-input>
            </a-form-model-item>

            <div style="font-size:18px;color:#000;margin-bottom: 5px;margin-top: 5px;">合同信息</div>
            <a-form-model-item ref="time" label="合同时间" prop="time">
              <a-range-picker
                @change="timeChange"
                v-model="modalForm1.time"
                style="width:100%"
                :placeholder="placeholder"
              >
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-model-item>
            <!-- <a-spin :spinning="spinning1"> -->
            <a-form-model-item ref="subcontract" label="分包合同" prop="subcontract">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :show-upload-list="false"
              >
                <a-button>
                  <a-icon type="upload" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
              <a-spin :spinning="spinning1">
                <div v-for="(item,index) in modalForm1.fileInfoList" :key="index" class="pdfList">
                  <a-icon type="file-pdf" style="color:#1890ff;margin-right:20px" />
                  <span style="margin-right:20px">{{item.name}}</span>
                  <a-icon type="delete" class="delete" @click="pdfDelete(item.uid)" />
                </div>
              </a-spin>
            </a-form-model-item>
            <!-- </a-spin> -->
            <!-- <a-spin :spinning="spinning2"> -->
            <!-- prop="paymentContract" -->
            <a-form-model-item ref="paymentContract" label="委托工资支付协议">
              <a-upload
                name="file"
                accept=".pdf"
                :multiple="true"
                :remove="handleRemove2"
                :before-upload="beforeUpload2"
                :show-upload-list="false"
              >
                <a-button @click="flag='ccccccc'">
                  <a-icon type="upload" />上传文件
                </a-button>
                <div style="color:#ccc">请上传pdf文件</div>
              </a-upload>
              <a-spin :spinning="spinning2">
                <div v-for="(item,index) in modalForm1.fileInfoList2" :key="index" class="pdfList">
                  <a-icon type="file-pdf" style="color:#1890ff;margin-right:20px" />
                  <span style="margin-right:20px">{{item.name}}</span>
                  <a-icon type="delete" class="delete" @click="pdfDelete2(item.uid)" />
                </div>
              </a-spin>
            </a-form-model-item>

            <!-- </a-spin> -->
          </a-form-model>
        </div>

        <div v-if="modalTitle=='设置班组负责人'">
          <a-form-model ref="ruleForm2" :model="modalForm2" v-if="visible">
            <!-- :label-col="labelCol"
            :wrapper-col="wrapperCol"-->
            <a-form-model-item ref="charge" label="班组负责人" prop="charge">
              <a-select
                size="default"
                placeholder="请选择"
                :default-value="[]"
                @change="setGroupChange"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                v-model="chargeModel"
              >
                <a-select-option v-for="i in charge" :key="i.label">{{ i.value}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
          <a-form-model-item ref="charge" label="班组负责人账号" prop="user">
            <!-- v-if="this.userDefault.length" -->
            <a-select
              size="default"
              placeholder="请选择"
              @change="handleChangeUser"
              @popupScroll="popupScrollUser"
              show-search
              option-filter-prop="children"
              v-model="userModel"
              style="width:100%"
            >
              <a-select-option v-for="item in user" :key="item.id">{{ item.value}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>

        <div v-if="modalTitle=='编辑班组'">
          <a-form-model ref="ruleForm3" :model="modalForm3" v-if="visible">
            <!-- :label-col="labelCol"
            :wrapper-col="wrapperCol"-->
            <a-form-model-item ref="name" label="班组名称" prop="name">
              <a-input v-model="modalForm3.name"></a-input>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
    </div>

    <!-- 删除对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visibleDelete"
        title="删除"
        :maskClosable="false"
        width="645px"
        style="height:400px"
        :footer="null"
      >
        <div
          class="tipWord"
        >正在删除 {{this.formUnit.name}}，该操作不可逆，一旦操作成功，{{this.formUnit.name}}的数据将会删除。请输入下面内容再次确认操作。</div>
        <div style="margin-bottom:10px">请在下发输入框输入“{{this.formUnit.name}}”以确认操作</div>
        <div style="margin-bottom:30px">
          <a-input v-model="formDelete.content" :placeholder="'请输入'+this.formUnit.name" />
        </div>
        <div>
          <a-button style="color:red;width:100%;margin-bottom:30px" @click="checkDelete">确认删除</a-button>
        </div>
      </a-modal>
    </div>

    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visiblePdf"
        title
        @ok="handleOkPdf"
        :footer="null"
        :maskClosable="false"
        width="1080px"
        top="10px"
        :bodyStyle="{textAlign:'center'}"
        v-if="visiblePdf"
        key="modalpdf"
        class="pdfModal"
      >
        <embed width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>
    <!-- </a-spin> -->
  </div>
</template>

<script>
import moment from 'moment'
import { uploadOSS } from '@/utils/oss.js'
import { mapGetters } from 'vuex'
import {
  labourOrgAdd,
  labourOrgQuery,
  labourOrgGet,
  labourOrgDelete,
  labourOrgUpdate,
  contactAdd,
  teamGet,
  contactDelete,
  teamChargeGet,
  teamChargeSet,
  SysUser
} from '@/api/laborUnitInfo'
const columns = [
  { title: '施工班组名称', dataIndex: 'name', key: 'name', align: 'center', width: '300px' },
  { title: '班组长', dataIndex: 'leader', key: 'leader', align: 'center', width: '100px' },
  { title: '在场人数', dataIndex: 'personTotal', key: 'personTotal', align: 'center', width: '100px' },

  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    name: '下构一队下构一队下构一队',
    proName: '张三',
    proCode: '12'
  },
  {
    key: '2',
    name: '下构一队',
    proName: '张三',
    proCode: '12'
  }
]
const listData = [
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: true
  },
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: false
  },
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: false
  },
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: false
  }
]
export default {
  data() {
    let subcontract = (rule, value, callback) => {
      if (this.isUpload1 == false) {
        callback(new Error('请上传文件'))
      } else {
        this.$refs.ruleForm.validateField('subcontract')
        callback()
      }
    }
    // let paymentContract = (rule, value, callback) => {
    //   if (this.isUpload2 == false) {
    //     callback(new Error('请上传文件'))
    //   } else {
    //     this.$refs.ruleForm.validateField('paymentContract')
    //     callback()
    //   }
    // }

    return {
      placeholder: ['请选择', '请选择'],
      list: [],
      list2: [],
      formUnit: {
        name: '',
        creditCode: '',
        type: '',
        manager: '',
        contractStartDate: '',
        contractEndDate: '',
        contractFileInfoList: '',
        paymentPackageIdFileInfoList: ''
      },
      columns,
      data: [],
      visible: false,
      visiblePdf: false,
      pdfUrl: '',
      value: 1,
      radioStyle: {
        display: 'block',
        height: '40px',
        lineHeight: '40px'
      },
      teamGroup: [],
      modalTitle: '关联班组',
      modalForm1: {
        type: [
          {
            key: '1',
            lable: '劳务分包'
          },
          {
            key: '2',
            lable: '专业分包'
          }
        ],
        time: [],
        fileInfoList: [],
        fileInfoList2: [],
        typeValue: '',
        typeKey: '',
        defaultValue: { key: '' },
        creditCode: '',
        manager: '',
        name: ''
      },
      // defaultFileList: [],
      // defaultFileList2: [],
      uploadButton: '',
      // labelCol: { span: 7 },
      // wrapperCol: { span: 12 },
      isUpload1: false,
      isUpload2: false,
      flag: 'zzzzzz',
      rules: {
        name: [
          {
            required: true,
            message: '请输入单位名称',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        subcontract: [{ required: true, validator: subcontract, trigger: 'change' }]
        // paymentContract: [{ required: true, validator: paymentContract, trigger: 'change' }]
      },
      charge: [],
      modalForm2: {},
      modalForm3: {
        name: ''
      },

      isdelete: false,
      visibleDelete: false,
      formDelete: { content: '' },
      tabId: '',
      topInfo: {},
      spinning: true,
      spinningRight: false,
      groupId: '',
      selectData: '',
      selectLi: '',
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      laborUnitId: '',
      inOutStatus: '',
      spinning1: false,
      spinning2: false,
      user: '',
      userModel: '',
      chargeModel: '',
      chargeId: '',
      userId: ''
    }
  },
  mounted() {
    // sessionStorage.setItem('orgId', '6f8c6758d9754e2b9eb2d74bcc312512')
    this.getCharge()
    this.getUl()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },

  methods: {
    moment,
    pdfModal(value) {
      // console.log(value);
      this.pdfUrl = value.fileUrl
      this.visiblePdf = true
    },
    handleOkPdf() {
      this.visiblePdf = false
    },
    //可搜索选择框
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    //获取列表
    getUl() {
      let data = {
        page: 0,
        size: 0
      }
      let list = []
      let check = false
      this.spinning = true
      this.spinningRight = true
      labourOrgQuery(data).then((res) => {
        this.topInfo = res.data.data
        this.spinning = false
        this.spinningRight = false
        if (res.data.data.labourOrgVOList.length == 0) {
          this.list = []
          this.formUnit = {}
          this.data = []
          // this.isdelete = true
        } else {
          //  this.isdelete =false
          res.data.data.labourOrgVOList.forEach((item, index) => {
            if (this.selectLi == '' && index == 0) {
              check = true
              this.getTable(item.id)
            } else if (item.id == this.selectLi) {
              check = true
              this.getTable(item.id)
            } else {
              check = false
            }
            list.push({ id: item.id, title: item.name, group: item.teamTotal, person: item.inPersonTotal, check: check })
          })
          this.list = list
          this.list2 = list
        }
      })
    },

    getTable(id) {
      this.spinningRight = true
      this.tabId = id
      this.data = []
      this.formUnit = {}
      let data = {
        // inOutStatus: this.inOutStatus,
        // likeFullName: '',
        // orgId: '',
        // page: this.pageSize,
        // size:this.current,
        id: id
      }
      // ,page:1,size:5
      labourOrgGet(data).then((res) => {
        res.data.data.contractStartDate = moment(res.data.data.contractStartDate).format('YYYY-MM-DD')
        res.data.data.contractEndDate = moment(res.data.data.contractEndDate).format('YYYY-MM-DD')
        this.formUnit = res.data.data
        // console.log(this.formUnit);

        this.formUnit.teamVOList.forEach((item) => {
          item.key = item.id
        })
        this.data = res.data.data.teamVOList
        this.spinning = false
        // console.log(111111);

        this.spinningRight = false
      })
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTable(this.selectLi)
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTable(this.selectLi)
    },
    confirm(text, record) {
      // console.log(text)
      this.onCancel(text)
    },
    cancel(e) {
      console.log(e)
      this.$message.error('取消')
    },
    timeChange(e) {
      // console.log(e)
      // console.log(this.modalForm1.time);
    },
    //点击列表
    clickli(val) {
      this.list.forEach((item, index) => {
        if (item.id == val.id) {
          item.check = true
          this.selectLi = val.id
        } else {
          item.check = false
        }
      })
      // this.laborUnitId=val.id
      this.getTable(val.id)
    },
    onShow(text, record) {
      this.$router.push({ path: '/realNameManage/laborPerson', query: { selectLi: this.selectLi, teamId: record.id } })
    },
    onSet(text, record) {
      this.modalTitle = '设置班组负责人'
      this.groupId = text.id
      this.chargeModel = text.leader
      this.userModel = text.leaderUserFullName
      this.chargeId = text.leaderPersonId
      this.userId = text.leaderUserId
      // let _this = this
      // let findUser = this.user.find(function(data) {
      //   return data.value == _this.chargeModel
      // })
      // if (findUser == undefined) {
      //   this.userModel = ''
      // } else {
      //   this.userModel = findUser.value
      // }
      this.visible = true
    },
    getCharge() {
      let data = {
        // code: this.topInfo.code,
        orgId: this.userInfo.orgId,
        page: 0,
        size: 0
      }
      teamChargeGet(data).then((res) => {
        // console.log(res.data.data)
        let charge = res.data.data
        charge.forEach((item) => {
          item.label = item.id
          item.value = item.fullName
        })
        this.charge = charge
      })
      SysUser(data).then((res) => {
        let user = res.data.data
        user.forEach((item) => {
          item.label = item.id
          item.value = item.fullName
        })
        this.user = user
      })
    },
    onEdit(text, record) {
      this.modalTitle = '编辑班组'
      // console.log(record);
      this.groupId = text.id
      this.modalForm3.name = record.name
      this.visible = true
    },
    // 取消关联
    onCancel(text, record) {
      // console.log(text);
      let data = {
        labourOrgId: this.tabId,
        teamId: text.id
      }
      contactDelete(data).then((res) => {
        this.$message.destroy()
        this.$message.success('取消关联成功')
        this.getTable(this.tabId)
      })
    },
    //编辑删除
    handleMenu(e) {
      switch (parseInt(e.key)) {
        case 1:
          if (this.list.length == 0) {
            this.$message.destroy()
            this.$message.error('请先新增分包单位')
          } else {
            this.modalTitle = '编辑分包单位'
            // this.defaultFileList = []
            // this.defaultFileList2 = []
            this.modalForm1.fileInfoList = []
            this.modalForm1.fileInfoList2 = []
            this.modalForm1.time.push(moment(this.formUnit.contractStartDate).format('YYYY-MM-DD'))
            this.modalForm1.time.push(moment(this.formUnit.contractEndDate).format('YYYY-MM-DD'))
            this.formUnit.contractFileInfoList.forEach((item) => {
              let file = { uid: item.id, name: item.fileName, status: 'done', url: item.fileUrl }
              // this.defaultFileList.push(file)
              this.modalForm1.fileInfoList.push(file)
            })
            this.formUnit.paymentPackageIdFileInfoList.forEach((item) => {
              let file = { uid: item.id, name: item.fileName, status: 'done', url: item.fileUrl }
              // this.defaultFileList2.push(file)
              this.modalForm1.fileInfoList2.push(file)
            })
            // console.log( this.formUnit.type);
            let key
            if (this.formUnit.type == '劳务分包') {
              key = 1
            } else {
              key = 2
            }
            this.modalForm1.typeKey = key
            if (this.formUnit.type) {
              this.modalForm1.defaultValue = { key: this.formUnit.type }
            } else {
              this.modalForm1.defaultValue = { key: '' }
            }
            // console.log(this.modalForm1.defaultValue );
            this.visible = true
            this.modalForm1.typeValue = this.formUnit.type
            this.modalForm1.creditCode = this.formUnit.creditCode
            this.modalForm1.manager = this.formUnit.manager
            this.modalForm1.name = this.formUnit.name
          }
          break
        case 2:
          this.visibleDelete = true
          this.formDelete.content = ''
          break
        default:
          break
      }
    },
    checkDelete() {
      if (this.formDelete.content == this.formUnit.name) {
        labourOrgDelete({ id: this.tabId }).then((res) => {
          this.$message.success('删除成功')
          this.selectLi = ''
          this.getUl()
          this.visibleDelete = false
        })
      } else {
        this.$message.error('内容输入错误')
      }
    },
    relationGroup() {
      this.modalTitle = '关联班组'
      let data = {
        orgId: this.userInfo.orgId
      }
      teamGet(data).then((res) => {
        let teamGroup = res.data.data
        teamGroup.forEach((item) => {
          item.value = item.id
        })
        this.teamGroup = teamGroup
      })
      this.visible = true
    },
    newAdd() {
      this.modalTitle = '新建分包单位'
      this.modalForm1.name = ''
      this.modalForm1.time = []
      this.modalForm1.creditCode = ''
      this.modalForm1.manager = ''
      this.isUpload1 = false
      this.isUpload2 = false
      this.modalForm1.fileInfoList = []
      this.modalForm1.fileInfoList2 = []
      // this.defaultFileList = []
      // this.defaultFileList2 = []
      this.visible = true
    },
    clickConfirm() {
      switch (this.modalTitle) {
        case '关联班组':
          let data = {
            labourOrgId: this.tabId,
            teamId: this.value,
            orgId: this.userInfo.orgId
          }
          contactAdd(data).then((res) => {
            this.visible = false
            this.getUl()
          })
          break
        case '设置班组负责人':
          let data2 = {
            id: this.groupId,
            leaderOrgPersonId: this.chargeId,
            leaderUserId: this.userId
          }
          teamChargeSet(data2).then((res) => {
            this.visible = false
            this.getUl()
          })
          break

        case '编辑班组':
          let data3 = {
            id: this.groupId,
            name: this.modalForm3.name
          }
          teamChargeSet(data3).then((res) => {
            this.visible = false
            this.getUl()
          })
          break
        default:
          if (this.modalForm1.fileInfoList.length != 0) {
            this.isUpload1 = true
          }
          if (this.modalForm1.fileInfoList2.length != 0) {
            this.isUpload2 = true
          }
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.list = this.list2

              let contractFileInfoList = []

              this.modalForm1.fileInfoList.forEach((item, index) => {
                contractFileInfoList.push({ fileName: item.name, fileUrl: item.url, id: item.uid })
              })
              this.spinning = true

              // contractFileInfoList['fileName']=this.modalForm1.fileInfoList.name
              // contractFileInfoList['fileUrl']=this.modalForm1.fileInfoList.name
              let paymentPackageIdFileInfoList = []
              this.modalForm1.fileInfoList2.forEach((item, index) => {
                paymentPackageIdFileInfoList.push({ fileName: item.name, fileUrl: item.url, id: item.uid })
              })
              // console.log(paymentPackageIdFileInfoList);
              let paymentPackageId = ''
              if (paymentPackageIdFileInfoList.length > 0) {
                paymentPackageId = paymentPackageIdFileInfoList[0].id
              }

              // paymentPackageIdFileInfoList['fileName']=this.modalForm1.fileInfoList2.name
              // paymentPackageIdFileInfoList['fileUrl']=this.modalForm1.fileInfoList2.name
              let contractEndDate = ''
              let contractStartDate = ''
              if (this.modalForm1.time[1]) {
                contractEndDate = this.modalForm1.time[1]._d
              }
              if (this.modalForm1.time[0]) {
                contractStartDate = this.modalForm1.time[0]._d
              }
              let data = {
                contractEndDate: contractEndDate,
                contractFileInfoList: contractFileInfoList,
                contractPackageId: contractFileInfoList[0].id,
                contractStartDate: contractStartDate,
                creditCode: this.modalForm1.creditCode,
                manager: this.modalForm1.manager,
                name: this.modalForm1.name,
                id: this.tabId,
                orgId: this.userInfo.orgId,
                paymentPackageId,
                paymentPackageIdFileInfoList: paymentPackageIdFileInfoList,
                type: this.modalForm1.typeKey
              }

              if (this.modalTitle == '新建分包单位') {
                if (this.spinning1 == false) {
                  labourOrgAdd(data).then((res) => {
                    this.$message.success('新建成功')
                    this.visible = false
                    this.getUl()
                  })
                }
              } else if (this.modalTitle == '编辑分包单位') {
                if (this.spinning1 == false) {
                  labourOrgUpdate(data).then((res) => {
                    this.$message.success('编辑成功')
                    this.visible = false
                    this.getUl()
                  })
                }
              }
            } else {
              return false
            }
          })
          break
      }
    },
    radioChange(e) {
      // console.log(this.value, e.target.value)
      // this.value=e.target.value
    },
    selectChange(value) {
      this.modalForm1.typeValue = value.key
      this.modalForm1.typeKey = value.key
      // console.log(value)
    },
    // 班组负责人选择
    setGroupChange(value) {
      this.chargeId = value
      //  console.log(this.charge);
      let _this = this
      let findObj = this.charge.find(function(obj) {
        return obj.label == value
      })
      let findUser = _this.user.find(function(data) {
        return data.value == findObj.value
      })
      if (findUser == undefined) {
        this.userModel = ''
      } else {
        // console.log(findUser);
        this.userId = findUser.id
        this.userModel = findUser.value
      }
    },
    popupScroll() {
      // console.log('popupScroll');
    },
    handleChangeUser(value) {
      this.userId = value
      // console.log( this.userId);

      // console.log(`Selected: ${value}`);
    },
    popupScrollUser() {
      // console.log('popupScroll');
    },
    handleRemove(file) {
      // console.log(file.uid)

      this.modalForm1.fileInfoList.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.modalForm1.fileInfoList.splice(index, 1)
        }
      })
      if (this.modalForm1.fileInfoList.length != 0) {
        this.isUpload1 = true
      } else {
        this.isUpload1 = false
      }
    },
    handleRemove2(file) {
      this.modalForm1.fileInfoList2.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.modalForm1.fileInfoList2.splice(index, 1)
        }
      })
      if (this.modalForm1.fileInfoList2.length != 0) {
        this.isUpload2 = true
      } else {
        this.isUpload2 = false
      }
    },
    beforeUpload(file) {
      // console.log(file)
      if (this.configFun.pdf(file)) {
        this.uploadButton = '分包合同'
        const reader = new FileReader()
        reader.readAsDataURL(file) // 读取图片文件
        // if (this.flag == true) {
        //   this.form.packageId = file.uid
        //   this.flag = false
        // }
        this.spinning1 = true
        reader.onload = (data) => {
          //  console.log(file)
          this.uploadFile(data.target.result, file.name, file.uid)
        }
        this.isUpload1 = true
      } else {
        // this.defaultFileList = []
        // this.flagUpload=true
        this.$message.error('你上传的不是PDF')
        return false
      }

      return false
    },
    beforeUpload2(file) {
      // console.log(file)
      if (this.configFun.pdf(file)) {
        this.uploadButton = '委托公司支付协议'
        const reader = new FileReader()
        reader.readAsDataURL(file) // 读取图片文件
        // if (this.flag == true) {
        //   this.form.packageId = file.uid
        //   this.flag = false
        // }
        // console.log(this.flag)
        this.spinning2 = true
        reader.onload = (data) => {
          //  console.log(file)
          this.uploadFile(data.target.result, file.name, file.uid)
        }
        // console.log(1111111)

        this.isUpload2 = true
        // this.$message.success(`${file.name} 上传成功`, 1)
      } else {
        // this.defaultFileList = []
        // this.flagUpload=true
        this.$message.error('你上传的不是PDF')
        return false
      }
      return false
    },
    uploadFile(base64Data, fileName, fileUid, packageId) {
      let blob = this.dataURLtoBlob(base64Data)
      let dir = 'lw/' + 'DO' + packageId + '/'
      uploadOSS(blob, fileName, dir).then((fileUrl) => {
        // console.log(fileUrl, fileName)
        let obj = { url: fileUrl, name: fileName, uid: fileUid }
        // console.log(this.uploadButton)

        if (this.uploadButton == '分包合同') {
          this.modalForm1.fileInfoList.push(obj)
          this.$message.success(`${obj.name} 上传成功`, 1)
          this.spinning1 = false
        } else {
          this.modalForm1.fileInfoList2.push(obj)
          this.$message.success(`${obj.name} 上传成功`, 1)
          this.spinning2 = false
        }
      })
    },

    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },
    pdfDelete(uid) {
      let findVal = this.modalForm1.fileInfoList.findIndex((item) => {
        return item.uid === uid
      })
      // console.log(findVal)

      this.modalForm1.fileInfoList.splice(findVal, 1)
      if (this.modalForm1.fileInfoList.length != 0) {
        // this.isUpload = true
        this.isUpload1 = true
      } else {
        this.isUpload1 = false
      }
    },
    pdfDelete2(uid) {
      let findVal = this.modalForm1.fileInfoList2.findIndex((item) => {
        return item.uid === uid
      })
      // console.log(findVal)

      this.modalForm1.fileInfoList2.splice(findVal, 1)
      if (this.modalForm1.fileInfoList2.length != 0) {
        // this.isUpload = true
        this.isUpload2 = true
      } else {
        this.isUpload2 = false
      }
    }
  }
}
</script>

<style scoped lang='less'>
::v-deep .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none;
}
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 30px 30px;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ededed;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.left {
  width: 25%;
  border-right: 1px solid #ededed;
}
.right {
  width: 75%;
}
.left,
.right {
  background: #fff;
  min-height: 700px;
  padding: 15px 30px;
}
.left {
  padding: 15px 20px;
}
.list {
  ul,
  li {
    list-style: none;
  }
  ul {
    margin: 0;
    padding: 0 0px;
  }
}
.list_title {
  font-size: 18px;
  // font-weight: 600;
  color: black;
  text-align: left;
  padding: 10px 0 20px 0;
}
.list_content {
  //  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #999;
  // padding: 0 20px;
}
.li_content {
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0px 0px 4px #ccc;
  padding: 15px;
  border: 1px solid rgba(255, 251, 230, 0);
}

.li_content:hover {
  border: 1px solid #1890ff;
  cursor: pointer;
}
.activeLi {
  // border: 1px solid rgba(255, 251, 230, 0);
  background: #1890ff;
}
.activeTitle {
  color: #fff;
}
.activeContent {
  color: #fff;
}
.aform {
  background: #f5faff;
  padding: 10px 30px;
  margin-bottom: 20px;
}
.unitTitle {
  color: #000;
  font-size: 20px;
  line-height: 100%;
  margin-left: 20px;
  // text-align: left;
}
.tipWord {
  border: 1px solid rgba(255, 229, 143, 1);
  border-radius: 4px;
  background: rgba(255, 251, 230, 1);
  padding: 16px 20px;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 30px;
}
.aModal {
  ::v-deep .ant-modal-body {
    max-height: 500px;
    overflow: auto;
  }
}

.aModal {
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    /**/
  }
}
.aModal {
  ::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 4px;
  }
}
.aModal {
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
  }
}
.pdfModal {
  ::v-deep .ant-modal {
    width: 1080px !important;
    // top: 20px;
  }
}
.pdfModal ::v-deep .ant-modal-body {
  padding: 40px;
  text-align: center;
  height: 780px;
}
.delete:hover {
  color: #1890ff;
  cursor: pointer;
}
.pdfList {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin: 7px 0px;
}
::v-deep .ant-upload.ant-upload-select {
  width: 100%;
}
::v-deep .ant-modal {
  padding-bottom: 0;
}
</style>
